<template>
    <div>
        <van-nav-bar
                title="收银台"
                left-text="返回"
                right-text="订单中心"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />
        <div class="su_box">
            <div>￥{{orderPay.money}}.00</div>
            <div><div>支付剩余时间：</div><van-count-down millisecond :time="orderPay.countdown" format="HH:mm:ss:SS" /></div>
        </div>
        <div class="su_abox">
            <van-icon name="gold-coin-o"  size="20"/><span>收银台</span>
        </div>
        <div>
            <van-radio-group v-model="radio">
                <van-cell-group>
                    <van-cell title="微信支付" clickable @click="radio = '0'">
                        <template #right-icon>
                            <van-radio name="0" />
                        </template>
                    </van-cell>
                    <van-cell title="支付宝支付" clickable @click="radio = '1'">
                        <template #right-icon>
                            <van-radio name="1" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </div>
        <div class="su_bbox">
            <van-button type="primary" @click="shoeTime" block>立即支付</van-button>
        </div>
        <van-dialog v-model="show" title="请输入支付密码" show-cancel-button @confirm="playerPay" @cancel="badBoy">
            <div>
                <div class="pay">￥{{orderPay.money}}.00</div>
                <van-password-input
                        :value="playerBuy.payPassword"
                        :focused="showKeyboard"
                        @focus="showKeyboard = true"
                />
            </div>
        </van-dialog>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
        name: "success",
        data(){
            return{
                orderPay:{
                    money:0,
                    countdown:0,
                    modes:'1',
                },
                radio: '1',
                activeIcon: 'https://img01.yzcdn.cn/vant/user-active.png',
                inactiveIcon: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                show: false,
                showKeyboard: true,
                playerBuy:{
                    orderPayType:'0',
                    orderId:'25',
                    payPassword:'047844',
                },
                numberPassword:'047844',
            }
        },
        mounted() {
            this.panDuan();
            this.player();
        },
        methods:{
            onClickLeft() {
                Toast('返回');
            },
            onClickRight() {
                Toast(this.radio);
            },
            shoeTime(){
                this.show=true;
                this.playerBuy.orderPayType=this.radio;
            },
            playerPay(){
                if(this.playerBuy.payPassword.length>0){
                    if(this.playerBuy.payPassword==this.numberPassword){
                        this.$axios.post('/api/marketOrder/pay?orderPayType='+this.playerBuy.orderPayType+'&orderId='+this.playerBuy.orderId+'&payPassword='+this.playerBuy.payPassword).then((res)=>{
                            console.log(res.data)
                            if(res.data.code==200){
                                Toast(res.data.msg);
                                // this.$router.push({name:'/'})
                            }if(res.data.code==1002){
                                Toast(res.data.msg);
                                // this.$router.push({name:'/'})
                            }if(res.data.code==1034){
                                Toast(res.data.msg);
                                // this.$router.push({name:'/'})
                            }if(res.data.code==1031){
                                Toast(res.data.msg);
                                // this.$router.push({name:'/'})
                            }
                        })
                    }else {
                        Toast('支付密码不正确');
                    }
                }else {
                    Toast('请输入密码');
                }
            },
            player(){
                this.$axios.post('/api/order/orderDetail?orderId='+this.playerBuy.orderId).then((res)=>{
                    console.log(res.data)
                    let playerList=res.data.data;
                    if(res.data.code==200){
                        let nowTime=new Date();
                        nowTime=nowTime.getFullYear() + '-' + (nowTime.getMonth() + 1) + '-' + nowTime.getDate() + ' ' + nowTime.getHours() + ':' + nowTime.getMinutes() + ':' + nowTime.getSeconds();
                        let endTime=playerList.orderUpdateTime;
                        this.orderPay.money=playerList.orderPrice;
                        this.orderPay.countdown=this.timeDate(nowTime,endTime);
                    }else if(res.data.code==1002){
                        Toast.fail(res.data.msg);
                        //跳转到主页
                        // this.$router.push({name:'father'});
                    }
                })
            },
            panDuan(){
                this.playerBuy.goodsFormatId=38;
                this.playerBuy.addressId=1;
                this.playerBuy.couponId=1;
                this.playerBuy.userId=1;
                if(this.playerBuy.orderType==0){
                    this.playerBuy.groupId=5;
                }if(this.playerBuy.orderType==3){
                    this.playerBuy.flashId=1;
                }if(this.playerBuy.orderType==2){
                    this.playerBuy.helpTeamId=1;
                }
            },
            badBoy(){
                Toast('点击取消了');
            },
            timeDate(startTime, endTime){
                    // 开始时间
                    let d1 = startTime.replace(/\-/g, "/");
                    let date1 = new Date(d1);
                    // 结束时间
                    let d2 = endTime.replace(/\-/g, "/");
                    let date2 = new Date(d2);
                    // 时间相差秒数
                    let dateDiff = date2.getTime() - date1.getTime();
                    // 计算出相差天数
                    let days = Math.floor(dateDiff / (24 * 3600 * 1000));
                    // 计算出小时数
                    let residue1 = dateDiff % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
                    let hours = Math.floor(residue1 / (3600 * 1000));
                    // 计算相差分钟数
                    let residue2 = residue1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
                    let minutes = Math.floor(residue2 / (60 * 1000));
                    // 计算相差秒数
                    let residue3 = residue2 % (60 * 1000); // 计算分钟数后剩余的毫秒数
                    let seconds = Math.round(residue3 / 1000);
                let returnVal =days*24*60*60*1000+hours*60*60*1000+minutes*60*1000+seconds*1000;
                    return returnVal;
            }
        }
    }
</script>

<style scoped>
    .su_box>div:first-child{
        height: 60px;
        line-height: 75px;
        text-align: center;
        font-size: 27px;
        font-weight: bold;
        color: #E9311A;
    }
    .su_box>div:last-child{
        display: flex;
        align-items: center;
        padding-left: 30%;
        font-family: "华文楷体";
        font-weight: bold;
    }
    .su_abox{
        display: flex;
        align-items: center;
        color: #D9080E;
        font-weight: bold;
        background-color: #F4E8E8;
        height: 60px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-top: 20px;
        padding-left: 20px;
    }
    .van-cell__title{
        text-align: left;
        font-weight: bold;
        font-family: "华文楷体";
    }
    .su_bbox{
        position: fixed;
        width: 100%;
        bottom: 0px;
    }
    .pay{
        height: 20px;
    }
</style>